<template>
    <el-card style="margin-bottom: 10px">
      <el-button @click="switchLoginStatus" round>{{ msg.value }}</el-button>
    </el-card>
    <router-view/>
</template>

<script setup>
import axios from "axios";
import {reactive} from "vue";
import router from "@/router";

let msg = reactive([]);

document.title = '壹幕工作室信息化管理导航'

axios.get('/api/getUser').then(
    res => {
      let userInfo = res.data
      if(res.status === 200 && userInfo['name'] !== null) {
        localStorage.setItem('username', userInfo['name'])
        localStorage.setItem('stuID', userInfo['id'])
        localStorage.setItem('type', userInfo['type'])
        localStorage.phone = userInfo['phone']
        msg.value = '您好，' + userInfo['name'] + '，点此注销'
      }else {
        msg.value = '欢迎来到壹幕工作室，点此登录'
        localStorage.clear()
      }
    }
).catch(() => {
  msg.value = '欢迎来到壹幕工作室，点此登录'
  localStorage.clear()
})

const updateMsg = () => {
  if (localStorage['username']) {
    msg.value = '您好，' + localStorage['username'] + '，点此注销'
  } else {
    msg.value = '欢迎来到壹幕工作室，点此登录'
  }
}

setInterval(updateMsg, 300)

const switchLoginStatus = () => {
  if(localStorage.username !== undefined) {
    localStorage.clear()
  } else {
    router.push('/login')
  }
}
</script>

<style scoped>
el-header {
  text-align-all: center;
}
</style>
